import React,{Component,PropTypes} from "react";
import {connect} from "react-redux";
import Posts from "../components//Posts";
import fetchPosts from "../actions";

class App extends Component{
    static propTypes = {
      posts: PropTypes.array.isRequired,
      isFetching: PropTypes.bool.isRequired
    };
    // componentDidMount() {
    //   this.props.dispatch(fetchPosts("reactjs"));
    // };
    handleClick=()=>{
        // fetchPosts(this.props.dispatch,"reactjs");
        this.props.dispatch(fetchPosts(this.props.dispatch,"reactjs"))
    };
    render(){
        const {posts,isFetching} =this.props;
        const isEmpty=posts.length===0;
        return(
            <div>
                <button onClick={this.handleClick}>点击请求数据</button>
                {isEmpty
                  ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
                  : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
                      <Posts posts={posts} />
                    </div>
                }
            </div>
            )
    }
};

const mapStateToProps = state => {
  return {
    posts:state.items,
    isFetching:state.isFetching
    }
}

export default connect(mapStateToProps)(App);